<template>
  <div class="switches">
    <ul class="switcheslist">
      <li class="switch-item" v-for="(item, index) in switches" :key="index" :class="{'active' : currentIndex === index}" @click="switchItem(index)"><span>{{item.name}}</span></li>
    </ul>
  </div>
</template>

<script type="text/ecmascript-6">
export default{
  props: {
    switches: {
      type: Array,
      default: () => []
    },
    currentIndex: {
      type: Number,
      default: 0
    }
  },
  methods: {
    switchItem (index) {
      this.$emit('switch', index)
    }
  }
}
</script>

<style lang="stylus" scoped rel="stylesheet/stylus">
  @import '~common/stylus/variable';
  .switches
    width 80%;
    margin 0 auto;
    .switcheslist
      width 100%;
      display flex;
      border 1px solid #333;
      border-radius 4px;
      .switch-item
        padding 10px 0;
        flex 1;
        text-align center;
        color $color-text-d;
      .active
        color $color-text;
        background-color $color-highlight-background;
</style>
